<template>
	<view class="container"
    :style="[
      { backgroundImage:`url(${staticImgs.bg})`},
    ]"
		v-if="quesitonList">
    <view class="center-wrapper">
      
     <view class="content-wrapper">
       <view class="tit">目录</view>
        <scroll-view scroll-y="true" style="height: 60vh;">
          <view class="opts-box">
            <view v-for="(item,index) in quesitonList"
              :style="[
                { backgroundImage:`url(${ isSelectOptn(item) ?  staticImgs.boxAct : staticImgs.boxDef})`},
              ]"
              class="opt-box"
              :class="[isSelectOptn(item)?'opt-box-act' : '']"
              :key="index"  @click="itemClick(item,index)">
              <view>
                {{index+1}}
              </view>
            </view>
            
          </view>
        </scroll-view>
        
      </view>
      
      <view 
        :style="[
          { backgroundImage:`url(${staticImgs.btnBg})`},
        ]"
        class="ok-btn"
        v-if="isAllSelect"
        @click="okHandle"
      >
          提交
      </view> 
    
    </view>
      
	</view>
</template>

<script>
	export default {
		data() {
			return {
				quesitonList: null,
				isAllSelect:false,
        staticImgs:{
          bg: this.imgBaseURL + '/scl/directory/eq/scl-do-bg-eq.jpg',
          boxDef: this.imgBaseURL + '/scl/directory/eq/directory-opt-box-def-eq.png',
          boxAct: this.imgBaseURL + '/scl/directory/eq/directory-opt-box-act-eq.png',
          btnBg: this.imgBaseURL + '/scl/direcort-ok-btn.png',
        }
			}
		},
		mounted() {
			this.quesitonList = JSON.parse(uni.getStorageSync('questionList'))
			let len=0;
			this.quesitonList.map((item)=>{
				item.optnList.forEach((itemOptn)=>{
					if(itemOptn.select&&itemOptn.select=='1'){
						len++;
					}
				})
			})
			if(len==this.quesitonList.length){
				this.isAllSelect = true;
			}
		},
		methods: {
      okHandle(){
        this.$emit('ok')
      },
			nextQeustion(){
				uni.$emit('submitQuestion');
        uni.navigateBack();
			},
			isSelectOptn(item){
				let isSelect;
				item.optnList.forEach((itemOptn)=>{
					if(itemOptn.select&&itemOptn.select=='1'){
						isSelect = '1';
					}
				})
				return isSelect;
			},
			itemClick(item,index){
				uni.$emit('updateDirectoryIndex',{index:index});
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	  
  .container{
    display: flex;
    // padding-top: 6vh;
    padding-top: 40rpx;
    justify-content: center;
    
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;  
    
    background-size: 100% 100%;
    .center-wrapper{
      position: relative;
      padding-top: 28rpx;
      padding-bottom: 28rpx;
      width: 660rpx;
      
      border-radius: 46rpx;
      padding-left: 0;
      margin-bottom: 6vh;
      min-height: 60vh;
      
      
      .ok-btn{
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 500;
        font-size: 36rpx;
        color: #FFFFFF;
        line-height: 100rpx;
        text-align: center;
        font-style: normal;
        
        width: 500rpx;
        height: 100rpx;
        
        background-size: 100% 100%;
        background-repeat: no-repeat;
        
        margin: auto;
        margin-top: 60rpx;
      }
  
      
      .content-wrapper{
        margin: auto;
        // height: 69vh;
        overflow: auto;
        width: 660rpx;
        background: linear-gradient( 180deg, rgba(255,255,255,0.28) 0%, rgba(255,233,224,0.15) 22%, #FFDCE4 100%);
        
        border-radius: 46rpx;
        padding-left: 32rpx;
        padding-right: 32rpx;
        padding-bottom: 64rpx;
        
        margin-top: 28rpx;
        // padding-top: 80rpx;
        box-sizing: border-box;
        
        .tit{
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 54rpx;
          color: rgba(91, 8, 2, 1);
          line-height: 75rpx;
          text-align: center;
          font-style: normal;
          margin: auto;
          margin-top: 50rpx;
          margin-bottom: 40rpx;
        }
      }
      
      .opts-box{
        display: flex;
        flex-wrap: wrap;
        
        column-gap: 20rpx;
        row-gap: 32rpx;
      
        .opt-box{
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          box-sizing: border-box;

          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 40rpx;
          line-height: 80rpx;
          text-align: center;
          font-style: normal;
          
          background-repeat: no-repeat;
          background-size: 100% 100%;
          color: rgba(179, 66, 83, 1);
          
        }
        
        .opt-box-act{
          color: #FFFFFF;
        }
      }
    }
    
    
  }
</style>